<template>
	<view class="home">
		<view class="banner">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" circular="" style="height: 200px;"
				:duration="duration">
				<block v-for="(val,index) in banners" :key="index">
					<swiper-item>
						<view class="swiper-item">
							<image :src="val.imageUrl" mode="widthFix"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="network bg-box">
			<view class="network-item">
				<view class="col">
					<view class="col-title text-dark">矿池(SID)</view>
					<view class="col-content text-highlight">{{pool.poolSid}}</view>
				</view>
				<view class="col">
					<view class="col-title text-dark">全网总产出(SID)</view>
					<view class="col-content text-highlight">{{pool.yesterdayOut}}</view>
				</view>
			</view>
			<view class="network-item">
				<view class="col">
					<view class="col-title text-dark">昨日产出(SID)</view>
					<view class="col-content text-highlight">{{pool.userYesterdayOut}}</view>
				</view>
				<view class="col">
					<view class="col-title text-dark">累计产出(SID)</view>
					<view class="col-content text-highlight">{{pool.userTotalOut}}</view>
				</view>
			</view>
		</view>
		<view class="menu-list bg-box">
			<view class="item" @click="buyMiner">
				<view class="icon">
					<image mode="widthFix" src="../static/icon/home_app_app.png"></image>
				</view>
				<view class="icon-text text-dark">购买矿机</view>
			</view>
			<view class="item" @click="news">
				<view class="icon">
					<image mode="widthFix" src="../static/icon/home_app_news.png"></image>
				</view>
				<view class="icon-text text-dark">公告</view>
			</view>
			<view class="item" @click="shareApp">
				<view class="icon">
					<image mode="widthFix" src="../static/icon/home_app_video.png"></image>
				</view>
				<view class="icon-text text-dark">推广</view>
			</view>
		</view>

	</view>
</template>

<script>
	import api from "@/utils/api/pool/index.js"
	import indexApi from "@/utils/api/index/index.js"
	export default {
		data() {
			return {
				indicatorDots: false,
				autoplay: true,
				interval: 5000,
				duration: 500,
				banners: [],
				pool: {
					yesterdayOut: 0,
					poolSid: 0,
					userYesterdayOut: 0,
					userTotalOut: 0
				}
			}
		},
		onLoad() {
			let user = uni.getStorageSync("user")
			this.getBanner()
			//console.log(JSON.stringify(user))


		},
		onShow() {
			this.loadPool();
		},
		methods: {
			async getBanner() {
				let res = await indexApi.banner()
				if (res.status == 1) {
					this.banners = res.data;
				}
			},
			async loadPool() {
				let res = await api.index();
				if (res.status == 1) {
					this.pool.yesterdayOut = res.data.yesterday_out;
					this.pool.poolSid = res.data.pool_sid;
					this.pool.userYesterdayOut = res.data.user_yesterday_out;
					this.pool.userTotalOut = res.data.user_total_out;
				}
			},
			buyMiner() {
				uni.navigateTo({
					url: "miner/buy-miner-list"
				})
			},
			shareApp() {
				uni.navigateTo({
					url: "Invite/menu"
				})
			},
			news() {
				uni.navigateTo({
					url: "news/index"
				})
			}
		}
	}
</script>

<style lang="scss">
	view {
		display: flex;
		flex-direction: column;
	}

	page {
		height: 100%;
	}

	.home {
		height: 100%;
		background-image: url(../static/background/home_bg.png);
	}

	.banner {
		width: 100%;
		padding-top:15px;

		.swiper-item {
			width: 90%;
			margin: 0 5%;
			background-color: rgba(0,0,0,.6);
			border-radius: 6px;

			image {
				width: 100%;
				border-radius: 6px;
				box-shadow:  0 0 15px rgba(0,0,0,.1);
			}
		}
	}

	.network {
		padding: 15px;
		margin: 0 15px;
		border-radius: 6px;

		.network-item {
			flex-direction: row;

			.col {
				width: 50%;

				.col-title {
					font-size: 12px;
				}
			}
		}
	}

	.menu-list {
		flex-direction: row;
		justify-content: space-between;
		padding: 15px;
		margin: 15px;
		border-radius: 6px;

		.item {
			width: 60px;

			image {
				width: 100%;
			}

			.icon {
				width: 25px;
				margin: 0 auto;
			}

			.icon-text {
				font-size: 14px;
				text-align: center;
				margin-top: 5px;
			}
		}
	}
</style>
